<template>
  <view class="person-center-layout pageBg">
    <view class="person-info">
      <image
        class="avatar"
        mode="aspectFill"
        src="/static/tabBar/user-h.png"
      ></image>
      <view class="ip-address">192.165.10.125</view>
      <view class="from">来自：广西</view>
    </view>
    <view class="section mt-80">
      <view class="section-item" @click="gotoMyDownload">
        <view class="left flex items-center" >
          <uni-icons type="download" size="26"></uni-icons>
          <text class="text-[#5c5c5c] ml-2"> 我的下载 </text>
        </view>
        <view class="right flex items-center">
          <text style="color: #adadad">{{ downloadCount }}</text>
          <uni-icons type="forward" size="26" color="#adadad"></uni-icons>
        </view>
      </view>
      <view class="section-item">
        <view class="left flex items-center">
          <uni-icons type="star-filled" size="26"></uni-icons>
          <text class="text-[#5c5c5c] ml-2"> 我的评分 </text>
        </view>
        <view class="right flex items-center">
          <text style="color: #adadad">{{ rateCount }}</text>
          <uni-icons type="forward" size="26" color="#adadad"></uni-icons>
        </view>
      </view>

      <view class="section-item">
        <view class="left flex items-center">
          <uni-icons type="staff-filled" size="26"></uni-icons>
          <text class="text-[#5c5c5c] ml-2">
            <!-- #ifdef MP -->
            <button open-type="contact" class="contact-button">联系客服</button>
            <!-- #endif -->
            <!-- #ifndef MP -->

            <button class="contact-button" @click="clickContact">
              拨打电话
            </button>
            <!-- #endif -->
          </text>
        </view>
      </view>
    </view>
    <view class="section mt-50">
      <view class="section-item">
        <view class="left flex items-center">
          <uni-icons type="notification-filled" size="26"></uni-icons>
          <text class="text-[#5c5c5c] ml-2"> 订阅更新 </text>
        </view>
        <view class="right flex items-center">
          <uni-icons type="forward" size="26" color="#adadad"></uni-icons>
        </view>
      </view>
      <view class="section-item">
        <view class="left flex items-center">
          <uni-icons type="flag-filled" size="26"></uni-icons>
          <text class="text-[#5c5c5c] ml-2"> 常见问题 </text>
        </view>
        <view class="right flex items-center">
          <uni-icons type="forward" size="26" color="#adadad"></uni-icons>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";

const downloadCount = ref(0);
const rateCount = ref(0);

const clickContact = () => {
  uni.makePhoneCall({
    phoneNumber: "17620472034",
  });
};

const gotoMyDownload = () => {
	uni.navigateTo({
		url: "/pages/classlist/classlist"
	})
}
</script>

<style lang="scss">
.contact-button {
  background-color: transparent;
  border: none;
  color: rgb(92, 92, 92);
  outline: none;
  font-size: 30rpx;
  padding-left: 0;
  margin-left: 0;
  &:after {
    border: none;
  }
}
.person-center-layout {
  padding: 60rpx 32rpx 0;

  .mt-80 {
    margin-top: 80rpx;
  }

  .mt-50 {
    margin-top: 50rpx;
  }

  .section {
    border-radius: 8rpx;
    border: 1px solid #eeeeee;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
    :deep() {
      .uni-icons {
        color: $brand-theme-color !important;
      }
    }
    .section-item {
      height: 100rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 24rpx;
      border-bottom: 1px solid #eeeeee;

      &:last-child {
        border-bottom: none;
      }
    }
  }

  .person-info {
    display: flex;
    flex-direction: column;
    align-items: center;

    .avatar {
      width: 160rpx;
      height: 160rpx;
      border-radius: 50%;
      margin-bottom: 24rpx;
    }

    .ip-address {
      color: #333;
      font-size: 30rpx;
      margin-bottom: 16rpx;
      font-weight: bold;
    }

    .from {
      font-size: 24rpx;
      color: #999;
    }
  }
}
</style>
